<template>
    <div class="box">
        <navBar :navBar="navBar"></navBar>
        <div class="content">
            <div class="topInner">
                <p class="title">{{info.bi_name}}</p>
                <p class="text"></p>
            </div>
            <div class="innerBox">
                <div class="subInner">
                    <div class="item">
                        <p class="ttl">{{$t('结束时间')}}：</p>
                        <p class="text">{{getdate(info.endtime)}}</p>
                    </div>
                    <div class="item">
                        <p class="ttl">{{$t('认购币种')}}：</p>
                        <p class="text"><span>USD</span></p>
                    </div>
                    <div class="item">
                        <p class="ttl">{{$t('发行价格')}}：</p>
                        <p class="text"> 1 {{info.bi_name}} = {{ (info.money)/(usdtinfo.U_money )}}USDT</p>
                    </div>
                    <div class="item">
                        <p class="ttl">{{$t('发行总量')}}：</p>
                        <p class="text">{{info.sum}}{{info.bi_name}}</p>
                    </div>
                </div>
                <p class="note"><span><a :href="info.baipishu_url">{{$t('官网白皮书')}}</a></span>{{info.baipishu_url}}<span></span></p>
            </div>
            <div class="subBox">
                <p class="title">{{$t('申购周期')}}</p>
                <div class="inner">
                    <div class="item">
                        <p class="ttl">1、{{$t('预热')}}</p>
                        <p class="text">{{getdate(info.addtime)}}</p>
                    </div>
                    <div class="item">
                        <p class="ttl">2、{{$t('申购')}}</p>
                        <p class="text">{{getdate(info.starttime)}}</p>
                    </div>
                    <div class="item">
                        <p class="ttl">3、{{$t('结束')}}</p>
                        <p class="text">{{getdate(info.endtime)}}</p>
                    </div>
                </div>
            </div>
            <div class="subBox">
                <p class="title">{{$t('项目详情')}}</p>
                <p class="txt" v-html="info.des"></p>
            </div>
        </div>
        <div class="button" style="color: #FFFFFF;" @click="tishi = 1">
            <p>{{$t('认购')}}</p>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" >
            <van-picker
                title="选择币种"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
            />
        </van-popup>
		<van-popup v-model="tishi" round closeable @close="closereset">
		  <div class="wt-select-dialog" style="height: 8.000rem;">
		   
		    <div class="wt-dialog_bd">
				<p style="color: #000000;text-align: center;z-index: 10; font-size: 16px; ">{{$t("确认操作")}} </p>
				<div class="wt-card" style="min-height: 50px;text-align: center;padding-top: 10px;">
				  <input type="number" v-model="price"  style="width: 6.5rem;height: 1rem;border-radius: 5px;font-size: 12px;" :placeholder="$t('请输入数量')"/>		 
				</div>
				<div style="font-size: 12px;">1 {{info.bi_name}} = {{ (info.money)/(usdtinfo.U_money )}}USDT</div>
				<div style="font-size: 12px;">{{$t('需要支付USDT')}}: {{price2}}</div>
				<div style="font-size: 12px;">{{$t('可用余额')}}: {{zichanlist.money}}</div>
				
		      <van-row style="width: 100% !important;text-align: center;margin-left: -0.5rem;">		  
		          <van-button  type="info" @click="rechongzhi"> {{ $t("申购") }} </van-button>		        	
		      </van-row>
		    </div>
		  </div>
		</van-popup>
    </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
    name: 'subscriptionDetail',
    components: { navBar },
    data() {
        return {
            navBar: {
                back: true,
                title: "",
                close: false,
                btn: false,
                isBlue: true,
            },
            columns: ['USDT','BTC','ETH','EOS'],
            show: false,
			info:[],
			tishi:false,
			zichanlist:[],
			usdtinfo:[],
			price:0,
			price2:""
        };
    },

    mounted() {
        this.info = this.$route.query.item;
		this.getzichanlist();
		this.getUsdtPrice();
    },
	watch:{
		price(val){
			this.price2 = val*this.info.money
		}
	},
    methods: {
		rechongzhi(){
			if(this.price == ''){
				this.$toast(this.$t('数量不能为空'));
				return;
			}
			
			$postAxios(api.addNewCoinOrder, {id:this.info.id,num:this.price}, (res) => {
			  if (res.code == 0) {
			    this.$toast(this.$t(res.msg));
			    setTimeout(() => {
					this.$router.push("/mySubscription");
			      
			    }, 600);
			  } else {
			    this.$toast(this.$t(res.msg));
				
			  }
			  
			});
		},
		getzichanlist() {
		  $postAxios(api.getAssets, {}, (res) => {
		    this.zichanlist = res.data[0];
		    
		  });
		},
		getUsdtPrice(){
			$postAxios(api.getUsdtPrice, {}, (res) => {
			  this.usdtinfo = res.data;
			  
			});
		},
		closereset(){
			this.tishi  = 0;
		}, 
		getdate(nS) {
		  //var offset = 	new Date().getTimezoneOffset() / 60 + 1;
		  //console.log(offset);
		  //var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		  var date = new Date(nS*1000);
		  var year = date.getFullYear(),
		  		  month = ("0" + (date.getMonth() + 1)).slice(-2),
		  		  sdate = ("0" + date.getDate()).slice(-2),
		  		  hour = ("0" + date.getHours()).slice(-2),
		  		  minute = ("0" + date.getMinutes()).slice(-2),
		  		  second = ("0" + date.getSeconds()).slice(-2);
		  // 拼接
		  var result = year + "-"+ month +"-"+ sdate +" "+ hour +":"+ minute +":" + second;
		  // 返回
		  return result;
		},
        onConfirm(value, index) {
            console.log(`当前值：${value}, 当前索引：${index}`);
            this.show = false;
        },
        onChange(picker, value, index) {
            console.log(`当前值：${value}, 当前索引：${index}`);
        },
        onCancel() {
            console.log('取消');
            this.show = false;
        }, 
    },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .wt-select-dialog {
   
    height: 11.40097rem;
    background-color: #fff;
  	color: #222 !important;
    background-size: 100% 100%;
  	.wt-select-dialog text{
  		color: #000000 !important;
  	}
    .wt-dialog-hd {
   
      text-align: center;
      padding-top: 1.08696rem;
      height: 1.89855rem;
  	  color: #222 !important;
    }
  	
  
    .wt-dialog_bd {
      padding: 0.88309rem 1.48309rem 1.88309rem 1.62077rem;
  	  color: #000;
      .wt-card {
        background-color: transparent;
        box-shadow: 0 0 0 transparent;
      }
      .van-row {
        padding: 0 0.48309rem;
        margin-top: 0.48309rem;
  
        .van-button {
          height: 1.0628rem !important;
          color: #fff;
        }
        ::v-deep.quxiao {
          background: transparent !important;
          border: 0.026667rem solid #34a9ff !important;
          color: #000000 !important;
        }
      }
    }
  }
  .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 60px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f7f6fb;
    .topInner {
        padding: 15px 15px 30px;
        background-color: rgb(41, 121, 255);
        .title {
            margin-bottom: 5px;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
        }
        .text {
            color: #fff;
            font-size: 14px;
            word-break: break-all;
        }
    }
    .innerBox {
        margin: -20px 0 15px;
        padding: 15px;
        border-radius: 20px 20px 0 0;
        background-color: #fff;
        .subInner {
            margin-bottom: 15px;
            .item {
                padding: 15px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #333;
                font-size: 14px;
                border-bottom: 1px solid rgb(204, 204, 204);
            }
        }
        .note {
            color: #323232;
            font-size: 14px;
            span {
                margin-right: 10px;
            }
        }
    }
    .subBox {
        margin-bottom: 15px;
        padding: 15px;
        background-color: #fff;
        .title {
            margin-bottom: 10px;
            color: #333;
            font-size: 18px;
            font-weight: bold;
        }
        .txt {
            color: #323232;
            font-size: 14px;
            word-break: break-all;
        } 
        .inner {
            .item {
                padding: 10px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #333;
                font-size: 14px;
            }
        }
    }
  }
  .button {
    width: 95%;
    position: absolute;
    left: 2.5%;
    bottom: 10px;
    z-index: 10;
    color: #000;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
    border-radius: 5px;
    background-color: #F9D332;
  }
}
</style>